"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { FileText, Upload, X, Check, File, FileUp } from "lucide-react"
import { Progress } from "@/components/ui/progress"

// 模拟数据
const existingMaterials = [
  {
    id: "material-001",
    title: "数学 101 - 微分方程课件",
    type: "ppt",
    uploadDate: "2024-04-20",
    size: "2.5 MB",
  },
  {
    id: "material-002",
    title: "物理 201 - 电磁学教案",
    type: "pdf",
    uploadDate: "2024-04-18",
    size: "1.8 MB",
  },
  {
    id: "material-003",
    title: "化学 301 - 有机化学大纲",
    type: "docx",
    uploadDate: "2024-04-15",
    size: "1.2 MB",
  },
]

export function UploadMaterials() {
  const [files, setFiles] = useState<File[]>([])
  const [courseType, setCourseType] = useState("")
  const [materialTitle, setMaterialTitle] = useState("")
  const [uploading, setUploading] = useState(false)
  const [uploadProgress, setUploadProgress] = useState(0)
  const [uploadSuccess, setUploadSuccess] = useState(false)

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setFiles(Array.from(e.target.files))
      if (e.target.files.length === 1 && !materialTitle) {
        setMaterialTitle(e.target.files[0].name.split(".")[0])
      }
    }
  }

  const handleUpload = () => {
    if (files.length === 0 || !courseType || !materialTitle) return

    setUploading(true)
    setUploadProgress(0)

    // 模拟上传过程
    const interval = setInterval(() => {
      setUploadProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          setUploading(false)
          setUploadSuccess(true)

          // 重置表单
          setTimeout(() => {
            setFiles([])
            setCourseType("")
            setMaterialTitle("")
            setUploadSuccess(false)
          }, 2000)
          return 100
        }
        return prev + 10
      })
    }, 300)
  }

  const removeFile = (index: number) => {
    setFiles(files.filter((_, i) => i !== index))
    if (files.length === 1) {
      setMaterialTitle("")
    }
  }

  return (
    <Card className="h-full">
      <CardHeader>
        <CardTitle>上传课件</CardTitle>
        <CardDescription>上传课件、教案或教学大纲，用于内容对比分析</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="material-title">课件标题</Label>
            <Input
              id="material-title"
              value={materialTitle}
              onChange={(e) => setMaterialTitle(e.target.value)}
              placeholder="输入课件标题"
            />
          </div>

          <div className="grid gap-2">
            <Label htmlFor="course-type">课程类型</Label>
            <Select value={courseType} onValueChange={setCourseType}>
              <SelectTrigger id="course-type">
                <SelectValue placeholder="选择课程类型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="math">数学</SelectItem>
                <SelectItem value="physics">物理</SelectItem>
                <SelectItem value="chemistry">化学</SelectItem>
                <SelectItem value="biology">生物</SelectItem>
                <SelectItem value="other">其他</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="grid gap-2">
            <Label htmlFor="file-upload">上传文件</Label>
            <div className="border-2 border-dashed rounded-lg p-6 text-center cursor-pointer hover:bg-muted/50 transition-colors">
              <Input id="file-upload" type="file" multiple className="hidden" onChange={handleFileChange} />
              <label htmlFor="file-upload" className="cursor-pointer">
                <FileUp className="h-8 w-8 mx-auto mb-2" />
                <p className="text-sm font-medium">点击上传或拖放文件</p>
                <p className="text-xs text-muted-foreground mt-1">支持 PDF, PPT, DOCX, TXT 格式</p>
              </label>
            </div>
          </div>

          {files.length > 0 && (
            <div className="space-y-2">
              <Label>已选文件</Label>
              <div className="space-y-2">
                {files.map((file, index) => (
                  <div key={index} className="flex items-center justify-between p-2 border rounded-md">
                    <div className="flex items-center gap-2">
                      <FileText className="h-4 w-4 text-muted-foreground" />
                      <span className="text-sm truncate max-w-[200px]">{file.name}</span>
                      <span className="text-xs text-muted-foreground">{(file.size / 1024 / 1024).toFixed(2)} MB</span>
                    </div>
                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeFile(index)}>
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {uploading && (
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>上传进度</span>
                <span>{uploadProgress}%</span>
              </div>
              <Progress value={uploadProgress} />
            </div>
          )}

          <Button
            onClick={handleUpload}
            disabled={files.length === 0 || !courseType || !materialTitle || uploading}
            className="mt-2"
          >
            {uploading ? (
              <>
                <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                上传中...
              </>
            ) : uploadSuccess ? (
              <>
                <Check className="mr-2 h-4 w-4" />
                上传成功
              </>
            ) : (
              <>
                <Upload className="mr-2 h-4 w-4" />
                上传文件
              </>
            )}
          </Button>
        </div>

        <div className="mt-6">
          <h3 className="text-sm font-medium mb-3">已上传课件</h3>
          <div className="space-y-3">
            {existingMaterials.map((material) => (
              <div key={material.id} className="flex items-center justify-between p-3 border rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-primary/10 rounded-md">
                    <File className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="text-sm font-medium">{material.title}</h4>
                    <p className="text-xs text-muted-foreground">
                      {material.uploadDate} · {material.size} · {material.type.toUpperCase()}
                    </p>
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm">
                    查看
                  </Button>
                  <Button variant="outline" size="sm" className="text-destructive">
                    删除
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
